class Vue{
    constructor(obj_instabce){
        this.$data=obj_instabce
        Observer(this.$data)
        Compile(obj_instabce.el,this)
    }
}
// 数据劫持  监听实例里的数据
function Observer(data_instance){
    if(!data_instance||typeof data_instance!=='object') return
    Object.keys(data_instance).forEach((key)=>{
        let value = data_instance[key]
        Observer(value)
        Object.defineProperty(data_instance,key,{
            enumerable:true,
            configurable:true,
            get(){
                return value
            },
            set(newValue){
                value=newValue
            }
        })
    })
}

// html模板编译
function Compile(element,vm){
    vm.$el=document.querySelector(element)
    // 创建文档碎片节点
    const fragment = document.createDocumentFragment()
    let child
    while ((child=vm.$el.firstChild)){
        fragment.appendChild(child)
    }
}